<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <span class="name" >{{username}}</span>
    </div>
    <template #overlay>
      <a-menu :class="['avatar-menu']" >
        <a-menu-item @click="clear">
          <span>清除缓存</span>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item @click="logout">
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script setup>
import { clear_all } from "@/utils/util";
import { message } from "ant-design-vue";
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter()
const store = useStore()
const username = computed(()=>{
  const userInfo = store.getters['user/getUserInfo']
  return userInfo ? userInfo['username'] : ''
})

const logout = ()=>{
  store.commit('user/logout')
  router.push('/login')
}

const clear = () => {
  const hide = message.loading('清理中', 0)
  setTimeout(() => {
    clear_all()
    hide()
    message.success('清理成功')
  }, 800);
}
</script>

<style lang="less" scoped>
.header-avatar{
  display: inline-flex;
  .avatar, .name{
    align-self: center;
  }
  .avatar{
    margin-right: 8px;
  }
  .name{
    font-weight: 500;
  }
}
.avatar-menu{
  width: 150px;
}
</style>